<template>
  <div class="page-container">
    <ac-table
      ref="dataTable"
      pkName="id"
      :filters="filters"
      :filterFields="filterFields"
      :columns="columns"
      @handleTableOperator="handleTableOperator"
      @handleCellOperator="handleCellOperator"
    ></ac-table>
  </div>

  <!--新增编辑界面-->
  <el-dialog
    :title="dialogTitle"
    width="600px"
    v-model="dialogVisible"
    :close-on-click-modal="false"
    destroy-on-close
    draggable
    fullscreen
  >
    <div
      class="dialog-box"
      v-loading="dialogLoading"
      element-loading-text="数据加载中..."
    >
      <el-form
        ref="dataForm"
        label-width="120px"
        label-position="right"
        :model="formData"
        :rules="rules"
        :disabled="!dialogEdit"
        :hide-required-asterisk="!dialogEdit"
      >
        <el-row>
          <el-col :span="8">
            <el-form-item label="名称" prop="name">
              <el-input v-model="formData.name" />
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="默认显示" prop="defaultShow">
              <ac-dict-switch v-model="formData.defaultShow" dictCode="dictYesNo" />
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="显示选项卡" prop="showMenuTab">
              <ac-dict-switch v-model="formData.showMenuTab" dictCode="dictYesNo" />
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="是否有效" prop="valid">
              <ac-dict-switch v-model="formData.valid" dictCode="dictYesNo" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="菜单宽度" prop="menuWidth">
              <ac-number v-model="formData.menuWidth" :point="0"></ac-number>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="徽标数脚本" prop="badgeScriptId">
              <template #label>
                <span style="margin-right: 5px">徽标数脚本</span>
                <el-tooltip>
                  <template #content>
                    <div>返回Map&lt;String, Integer>的key, value形式数据：</div>
                    <div>key为【totalNumber】时value为菜单选择界面显示的徽标数</div>
                    <div>key为【菜单编码】时value为子系统菜单列表显示的徽标数</div>
                  </template>
                  <ac-icon iconId="018dca8ec9890493be26" />
                </el-tooltip>
              </template>
              <ac-tree
                v-model="formData.badgeScriptId"
                data-url="/system/scriptGroovy/queryTree"
                type-select="script"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="排序" prop="ordinal">
              <ac-number v-model="formData.ordinal" :point="0" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="22">
            <el-form-item label="首页显示图标" prop="iconId">
              <ac-image v-model="formData.iconId" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="11">
            <el-form-item label="头部内容类型" prop="pageTopType">
              <ac-buttons v-model="formData.pageTopType" options='文字,图片' />
            </el-form-item>
          </el-col>
          <el-col :span="11" v-if="formData.pageTopType === '文字'">
            <el-form-item label="头部显示文字" prop="pageTopContent">
              <el-input v-model="formData.pageTopContent" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row v-if="formData.pageTopType === '图片'">
          <el-col :span="22">
            <el-form-item label="头部显示图片" prop="pageTopImageId">
              <ac-image v-model="formData.pageTopImageId" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="22">
            <el-form-item label="子系统样式" prop="extendsCss" style="height: 350px">
              <ac-code v-model="formData.extendsCss" mode="css"></ac-code>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row v-if="!dialogEdit">
          <el-col :span="22">
            <el-form-item label="更新时间" prop="updateTime">
              <ac-datetime v-model="formData.updateTime" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row v-if="!dialogEdit">
          <el-col :span="22">
            <el-form-item label="创建时间" prop="createTime">
              <ac-datetime v-model="formData.createTime" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <template #footer>
      <el-button
        size="default"
        type="info"
        @click="dialogVisible=false"
      >{{dialogEdit ? '取消' : '关闭'}}</el-button>
      <el-button
        v-if="dialogEdit"
        size="default"
        type="primary"
        :loading="editLoading"
        @click="submitForm"
      >提交
      </el-button>
    </template>
  </el-dialog>

  <el-dialog
    v-model="fileVisible"
    width="500px"
    title="导入"
    :append-to-body="true"
    :close-on-click-modal="false"
    destroy-on-close
    draggable
  >
    <el-upload
      action=""
      :http-request="handleImport"
      :show-file-list=false
      accept=".dat"
    >
      <el-button :loading="fileLoading" type="primary">数据导入</el-button>
      <template #tip><div class="el-upload__tip">只能上传.dat文件</div></template>
    </el-upload>
    <template #footer>
      <div class="dialog-footer">
        <el-button
          size="default"
          @click="fileVisible=false"
          type="info"
        >关闭</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { nextTick, ref } from 'vue';
import api from "@/http/api";
import { ElMessage, ElMessageBox } from "element-plus";

const filters = ref({
  name: ''
});
const filterFields = ref([
  {prop: "name", label: "名称"}
]);

const columns = ref([
  {prop: "name", label: "名称", minWidth: 160, click: true},
  {prop: "type", label: "类型", minWidth: 80, type: 'dict-radio', dictCode: 'dictSubsystemType'},
  {prop: "defaultShow", label: "默认显示", minWidth: 90, type: 'dict-radio', dictCode: 'dictYesNo', sortable: false},
  {prop: "showMenuTab", label: "显示选项卡", minWidth: 90, type: 'dict-radio', dictCode: 'dictYesNo', sortable: false},
  {prop: "iconId", label: "首页显示图标", minWidth: 110, type: 'image', sortable: false},
  {prop: "pageTopType", label: "头部显示类型", minWidth: 100, sortable: false},
  {prop: "pageTopContent", label: "头部显示文字", minWidth: 100, sortable: false},
  {prop: "pageTopImageId", label: "头部显示图片", minWidth: 110, type: 'image', sortable: false},
  {prop: "valid", label: "是否有效", minWidth: 80, type: 'dict-radio', dictCode: 'dictYesNo', sortable: false},
  {prop: "ordinal", label: "排序", minWidth: 80, type: 'number'},
  {prop: "updateTime", label: "更新时间", width: 160, onlyShow: true, type: "datetime"},
]);

const rules = ref({
  name: [
    {required: true, message: '请输入名称', trigger: ['change', 'blur']},
    {max: 100, message: '长度必须小于等于 100 个字符！', trigger: ['change', 'blur']}
  ],
  defaultShow: [
    {required: true, message: '请选择默认显示', trigger: ['change', 'blur']},
  ],
  ordinal: [
    {required: true, message: '请输入排序', trigger: ['change', 'blur']}
  ],
});

const dataTable = ref();
const dialogTitle = ref('');
const dialogEdit = ref(false);
const dialogVisible = ref(false);
const dialogLoading = ref(false);
const editLoading = ref(false);
const dataForm = ref();
const formData = ref({});
const defaultFormData = ref({
  type: '3',
  defaultShow: '0',
  showMenuTab: '0',
  pageTopType: '文字',
  ordinal: 10,
  valid: '1'
});

const fileVisible = ref(false);
const fileLoading = ref(false);

const handleImport = (file) => {
  api.uploadFile('/system/subsystem/importData', {'file': file.file}).then((res) => {
    ElMessage.success(res.message);
    fileVisible.value = false;
    dataTable.value.findPage();
  });
};

const handleCellOperator = (property, value, row) => {
  formData.value = Object.assign({}, row);
  dialogVisible.value = true;
  dialogEdit.value = false;
  dialogTitle.value = "查看";
  editLoading.value = false;

  nextTick(() => {
    dataForm.value && dataForm.value.clearValidate();
  });
};

const handleTableOperator = (button, row) => {
  dialogTitle.value = button.name;
  dialogEdit.value = true;
  editLoading.value = false;
  formData.value = Object.assign({}, defaultFormData.value);

  if (button.buttonType === 'edit') {
    formData.value = Object.assign({}, row, {button: button});
    dialogVisible.value = true
  } else if (button.buttonType === 'add') {
    formData.value = Object.assign({},
      defaultFormData.value,
      {menuWidth: 200, button: button});
    dialogVisible.value = true
  } else if (button.buttonType === 'exportData') {
    const data = row.map(item => item.id);
    api.downloadFile('/system/subsystem/exportData', {ids: data}).then(res => api.saveFileLocal(res));
  } else if (button.buttonType === 'importData') {
    fileVisible.value = true;
  } else {
    formData.value = Object.assign({button: button}, defaultFormData.value);
    dialogVisible.value = true
  }
};

const submitForm = () => {
  dataForm.value && dataForm.value.validate((valid) => {
    if (valid) {
      ElMessageBox.confirm('请确认是否提交？', '提示', {type: 'info'}).then(() => {
        editLoading.value = true;
        api.post(formData.value.button.dataDestUrl, formData.value).then(res => {
          ElMessage.success(res.message);
          dialogVisible.value = false;
          editLoading.value = false;
          dataTable.value.findPage();
        }).catch(() => {
          editLoading.value = false;
        });
      }).catch(()=>{});
    }
  });
};
</script>